<template>
	<view>
		<view class="fabuleixing">
			<view class="lefttxt">
				发布类型
			</view>
			<view class="r-box">
				<view class="itembox" v-for="(i,k) in leixinglist" :key="k" @click="hsh(i,k)">
					<image src="/static/xunwu/select.png" v-if="indexselect != k" style="width: 28rpx;height: 28rpx;"
						mode=""></image>
					<image src="/static/xunwu/select_s.png" v-if="indexselect == k" style="width: 28rpx;height: 28rpx;"
						mode=""></image>
					<view class="texts">
						{{i.text}}
					</view>
				</view>
			</view>
		</view>

		<view class="wupininfo">
			<view class="tt-box">
				<image src="/static/xunwu/wupininfo.png" style="width: 34rpx;height: 34rpx;" mode=""></image>
				<view class="infotxt">
					物品信息
				</view>
			</view>

			<view class="richtxt">
				<textarea name="infot" id="infot" cols="30" rows="10" v-model="remark"
					placeholder="请填写具体物品信息，物品特征等。例:红色框威双肩包，里面有个iPad和一些书"></textarea>
			</view>

			<view class="imgbox">
				<view class="itemimg" v-for="(i,k) in files" :key="k">
					<image :src="adminImgPath+i" class="imgs" mode=""></image>
					<view class="cuo">
						X
					</view>
				</view>
				
				<image src="/static/forum/uploads1.png" v-if="files.length<9" @click="uploadsmenimg" class="imgs" mode=""></image>
			</view>
			<view class="tips">
				*最多上传9张照片
			</view>
		</view>

		<view class="ikz-form-input-box ikz-afters" @click="goaddress" v-if="indexselect == 0">
			<image src="/static/xunwu/ysimg.png" style="width: 68rpx;height: 68rpx;" mode=""></image>
			<view class="quaddressbox" >
				<view class="quaddress">
					遗失地址
				</view>
				<view v-if="!address_default">请选择收货地点</view>
				<view class="ikz-form-address" v-else>
					{{address_default.name}}-{{address_default.mobile}}
					<view class="ikz-form-address-detail">
						{{address_default.group_name}}-{{address_default.detail}}
					</view>
				</view>
			</view>

		</view>
		<view class="ikz-form-input-box ikz-afters" @click="goaddress" v-if="indexselect == 1">
			<image src="/static/xunwu/lingqu.png" style="width: 68rpx;height: 68rpx;" mode=""></image>
			<view class="quaddressbox" >
				<view class="quaddress"> 
					领取地址
				</view>
				<view v-if="!address_default">请选择收货地点</view>
				<view class="ikz-form-address" v-else>
					{{address_default.name}}-{{address_default.mobile}}
					<view class="ikz-form-address-detail">
						{{address_default.group_name}}-{{address_default.detail}}
					</view>
				</view>
			</view>
		
		</view>

		<view class="phonebox">
			<view class="letbox">
				<image src="/static/xunwu/phone.png" style="width: 34rpx;height: 34rpx;" mode=""></image>
				<view class="">
					联系方式
				</view>
			</view>
			<input type="number" v-model="mobile" placeholder="请输入联系方式" />
		</view>

		<view class="ikz-tips">
			<view class="ikz-tips-title">
				<image class="ikz-form-input-img" src="/static/campus/tips.png" mode=""></image>
				提示说明
			</view>
			<view class="ikz-tips-box">
				<!-- <textarea v-model="form_data.remarks" class="ikz-tips-text" placeholder="请输入备注信息"></textarea>	 -->
				{{tips}}
			</view>
		</view>

		<view class="xieyibox">

			<image style="width: 28rpx;height: 28rpx;" v-if="isShow" @click="isShow = !isShow"
				src="/static/index/yes.png" mode=""></image>
			<image style="width: 28rpx;height: 28rpx;" v-else @click="isShow = !isShow" src="/static/index/no.png"
				mode="">
			</image>
			已阅读并同意<text style="color: #000;" @click="navto1">《用户协议》</text>和<text style="color: #000;"
				@click="toyins">《隐私政策》</text>
		</view>
		<view style="height:230rpx;background-color: #f5f5f5;">
		</view>


		<view class="btnbox">
			<view class="btntxt" @click="setUp">
				立即发布
			</view>
		</view>
	</view>
</template>

<script>
	import ikzLoading from '@/pages/Component/Public/Loading/loading.vue';
	var app = getApp( );
	import ikz from '@/pages/Common/tools.js';
	export default {
		components: {
			ikzLoading
		},
		data( ) {
			return {
				adminImgPath: getApp( ).globalData.adminImgPath,
				leixinglist: [ {
						Image: '/static/xunwu/select.png',
						text: '寻物启事',
						isshow: false
					},
					{
						Image: '/static/xunwu/select_s.png',
						text: '失物招领',
						isshow: true
					},
				],
				indexselect: 0,
				address_default: '',
				destination: '',
				tips: '东西多、重、楼栋高、路程远建议加价',
				isShow: false,
				files:[],
				remark:'',
				mobile:''
			};
		},
		onShow( ) {
			this.address_default = app.globalData.user_address.address_default;
			this.destination = this.address_default.id;
		},
		methods: {
			hsh( i, k ) {
				console.log( i, k, '123' );
				this.indexselect = k
			},
			//我的地址
			goaddress( ) {
				uni.navigateTo( {
					url: '/pages/Component/Module/Address/Program/myAddress/index'
				} )
			},
			navto1( type, title ) {
				uni.navigateTo( {
					url: '/pages/Component/Module/Other/Program/agreement/index'
				} )
			},
			toyins( ) {
				uni.navigateTo( {
					url: '/pages/Component/Module/Other/Program/insiinfo/insiinfo'
				} )
			},
			setUp( ) {
				if(!this.isShow) return uni.showToast({
					title:'暂未同意隐私协议',
					icon:'none'
				})
				if(this.files.length == 0) return uni.showToast({
					title:'请上传图片',
					icon:'none'
				})
				if(this.remark == '') return uni.showToast({
					title:'请填写物品信息',
					icon:'none'
				})
				if(this.address_default.detail == '') return uni.showToast({
					title:'请填写地址信息',
					icon:'none'
				})
				if(this.mobile == '') return uni.showToast({
					title:'请填写手机号',
					icon:'none'
				})
				var path = '/Announcement/insert';
				var data = {
					images: this.files,
					token: uni.getStorageSync( 'local_user_session' ),
					type:this.indexselect,
					remark:this.remark,
					detail:this.address_default.detail,
					mobile:this.mobile
				}; 
				ikz.requestPost( path, data, res => {
					console.log(res,'rrrr');
					if ( res.data.code == 1 ) {
						console.log( '发布' );
						uni.navigateTo({
							url:'/pages/Home/xunwushenhe/xunwushenhe'
						})
					} else {
						uni.showModal( {
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function( res ) {}
						} );
					}
				} )		
				
				
			},
			uploadsmenimg( ) {
				console.log( '门店上传' );
				var that = this;
				uni.chooseImage( {
					count: 1,
					sizeType: [ 'original', 'compressed' ],
					sourceType: [ 'album', 'camera' ],
					success( res ) {
						// tempFilePath可以作为img标签的src属性显示图片
						console.log( res, 'resss' );
			
						that.upload( res.tempFilePaths[ 0 ] )
					}
				} )
			},
			upload( val ) {
				uni.showLoading( {
					title: '上传中',
					mask: true,
				} )
				uni.uploadFile( {
					url: app.globalData.adminPath + '/common/upload',
					filePath: val,
					name: 'file',
					formData: {
						token: uni.getStorageSync( 'local_user_session' ),
					},
					success: uploadFileRes => {
						if ( uploadFileRes.code == 401 ) {
							console.log( uni.getStorageSync( 'local_user_session' ) );
						} else {
							if(this.files.length<9){
								this.files.push( JSON.parse( uploadFileRes.data ).data.url )
							}
							// images.push( JSON.parse( uploadFileRes.data ).data.url )
							console.log( this.files, 'files' );
						}
					},
					complete: ( ) => {
						uni.hideLoading( )
					},
				} )
			},
		},
	}
</script>

<style lang="scss" scoped>
	.fabuleixing {
		width: 750rpx;
		height: 94rpx;
		border-bottom: 16rpx solid #F5F5F5;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.lefttxt {
			width: 112rpx;
			height: 40rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			text-align: center;
		}

		.r-box {
			width: 356rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.itembox {
				width: 158rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
			}
		}
	}

	.wupininfo {
		width: 750rpx;
		min-height: 452rpx;
		background: #FFFFFF;
		border-bottom: 16rpx solid #F5F5F5;
		padding: 18rpx 30rpx;
		box-sizing: border-box;

		.tt-box {
			width: 100%;
			height: 38rpx;
			display: flex;
			align-items: center;

			.infotxt {
				width: 100%;
				height: 38rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #000000;
				text-align: left;
				line-height: 38rpx;
			}
		}

		.richtxt {
			width: 690rpx;
			height: 160rpx;
			background: #F5F5F5;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-top: 16rpx;
			padding: 10rpx;
			box-sizing: border-box;

			#infot {
				width: 100%;
				height: 160rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #AFAFAF;
				text-align: left;
			}
		}


		.imgbox {
			width: 100%;
			min-height: 200rpx;
			padding: 30rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;

			.itemimg {
				// width: 124rpx;
				min-height: 124rpx;
				margin-right: 18rpx;

				.imgs {
					width: 124rpx;
					height: 124rpx;
					background: #F5F5F5;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 2rpx solid #F5F5F5;
					position: relative;
				}

				.cuo {
					width: 24rpx;
					height: 24rpx;
					position: relative;
					right: -100rpx;
					top: -136rpx;
				}
			}

			.imgs {
				width: 124rpx;
				height: 124rpx;
				background: #F5F5F5;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #F5F5F5;
			}
		}

		.tips {
			width: 100%;
			height: 34rpx;
			font-weight: 400;
			font-size: 22rpx;
			color: #AFAFAF;
			text-align: left;
			padding-left: 30rpx;
			box-sizing: border-box;
		}
	}

	/* 输入 */
	.ikz-form-input-box {
		box-sizing: border-box;
		padding: 30rpx;
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #fff;
		justify-content: space-between;
	}

	.ikz-afters {
		position: relative;
	}

	.ikz-afters:after {
		content: " ";
		display: inline-block;
		height: 6px;
		width: 6px;
		border-width: 2px 2px 0 0;
		border-color: #888;
		border-style: solid;
		-webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
		transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
		top: -2px;
		position: absolute;
		top: 50%;
		margin-top: -4px;
		right: 20px;
	}

	.quaddressbox {
		width: 598rpx;
		/* height: 2rpx; */
		margin-left: 10rpx;
	}

	.quaddress {
		width: 100%;
		height: 44rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #000000;
		text-align: left;
	}

	.ikz-form-address {
		font-size: 28rpx;
	}

	.ikz-form-address-detail {
		color: #828282;
	}

	.phonebox {
		width: 100%;
		height: 128rpx;
		background: #FFFFFF;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-top: 16rpx solid #F5F5F5;
		border-bottom: 16rpx solid #F5F5F5;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.letbox {
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
		}

		input {
			width: 50%;
			height: 96rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			text-align: right;
		}
	}

	.ikz-tips {
		box-sizing: border-box;
		padding: 30rpx;
		width: 100%;
		width: 750rpx;
		height: 174rpx;
		background: #FFFFFF;
		border-bottom: 16rpx solid #F5F5F5;
	}

	.ikz-tips-box {
		margin-top: 20rpx;
		width: 100%;
		min-height: 100rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #FF4F21;
		text-align: left;
	}

	.ikz-tips-text {
		box-sizing: border-box;
		padding: 10rpx;
		width: 100%;
		height: 200rpx;
		border-radius: 15rpx;
		font-size: 28rpx;
		background-color: #F5F5F5;
	}

	.ikz-tips-title {
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
		text-align: left;


		.ikz-form-input-img {
			width: 50rpx;
			height: 50rpx;
			margin-right: 10rpx;
		}
	}



	.xieyibox {
		box-sizing: border-box;
		padding: 30rpx;
		width: 100%;
		display: flex;
		align-items: center;
		background: #fff;
		color: #AFAFAF;
		font-size: 22rpx;
		border-bottom: 16rpx solid #F5F5F5;
	}

	.btnbox {
		width: 750rpx;
		height: 176rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		padding-top: 10rpx;
		box-sizing: border-box;

		.btntxt {
			width: 690rpx;
			height: 88rpx;
			background: #247EFF;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
			margin: 0 auto;
		}
	}
</style>